<style media="screen">
  div.app-content[myapp='TRANSLATE-SHOW']{
    margin-left: 50px;
  }

  div.app-content[myapp='TRANSLATE-SHOW'] textarea{
    resize:none;
  }

  div.app-content[myapp='TRANSLATE-SHOW'] textarea:focus{
    border:1px solid red;
    border-color: #449d44;
  }

  div.app-content[myapp='TRANSLATE-SHOW'] div.translate-result{
    margin-top: 50px;
  }
</style>
<div class="app-content" myapp="TRANSLATE-SHOW">
  <div class="translate-source">
    <textarea name="name" class='js-translate-source' rows="8" cols="80"></textarea>
  </div>
  <button type="submit" class="btn btn-default btn btn-success js-to-translate">翻译</button>

  <div class="translate-result">
    <textarea name="name" class="js-translate-result" rows="8" cols="80"></textarea>
  </div>

</div>

<script type="text/javascript">
//http://fanyi.youdao.com/openapi.do?keyfrom=<keyfrom>&key=<key>&type=data&doctype=<doctype>&version=1.1&q=要翻译的文本
  $("button.js-to-translate").on("click", function(e){
    e.preventDefault();
    var url = ""
    var source = $("textarea.js-translate-source").val();
    if(source == "" || source == undefined){
      showErrorView("请输入翻译的词组");
      return false
    }
    $.ajax({
      url: "/api/translate",
      data: {source: source},
      success: function(data){
        if(data.status){
          $("textarea.js-translate-result").html(data.result)
        }else {
          showErrorView(data.result);
        }
      }
    })

  })
</script>
